<!--

    Author: Alex
    Date: 2021/9/25
-->

<!doctype html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>五子棋对弈</title>
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/js/layui/css/layui.css">
    <style>
        .con {
            width: 200px;
            margin: 10% auto;
            background-color: rgba(230, 230, 230, 0.8);
            padding: 20px 50px 60px 50px;
            border-radius: 10px;
        }

        .con h1 {
            text-align: center;
            letter-spacing: 5px;
            color: rgb(51, 51, 51);
        }

        .con a {
            display: block;
            width: 100%;
            height: 40px;
            background-color: brown;
            margin-top: 40px;
            text-align: center;
            line-height: 40px;
            color: white;
            text-decoration: none;
            letter-spacing: 5px;
            border-radius: 5px;
        }

        .tan {
            padding: 20px;
            display: flex;
        }
    </style>
</head>

<body>
<th:block th:include="introduce :: top"/>
<div class="con">
    <h1>跳动的棋子</h1>
    <a href="javascript:;" onclick="friendsPK()">好友PK</a>
    <a href="javascript:;" onclick="onlineGame()">联机对弈</a>
    <a href="javascript:;" onclick="humanComputer()">人机对战</a>
</div>

<script src="/js/jquery.min.js"></script>
<script src="/js/layer/layer.js"></script>
<th:block th:include="introduce :: topscript"/>
<script>

    function joinroom() {
        layer.closeAll();
        layer.prompt({title: '请输入用户姓名:', formType: 0}, function (to, index) {
            layer.close(index);
            $.get("/userIsServer", {user: to}, function (res) {
                if (res) {
                    window.location.href = "/play/" + to + "/" + localStorage.userId + "/1";
                }else{
                    layer.alert("没有该用户创建的房间");
                }
            });
        });
    }

    function createroom() {
        layer.closeAll();
        window.location.href = "/play/0/" + localStorage.userId + "/2";
    }

    function friendsPK() {
        var v = verify();
        if (v == undefined) {
            return;
        }
        //好友PK
        layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            shadeClose: true,
            content: '<div class="tan"><button class="layui-btn layui-btn-primary" onclick="joinroom()">加入房间</button><button class="layui-btn layui-btn-primary" onclick="createroom()">创建房间</button></div>'
        });
    }

    function onlineGame() {
        var v = verify();
        if (v == undefined) {
            return;
        }
        //联机对弈

        layer.alert("正在疯狂地编写中!!!");
    }

    function humanComputer() {
        //人机对战
        window.location.href = "/play/0/0/4";
    }


</script>
</body>
</html>